<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute,useRouter } from 'vue-router'
const router = useRouter()
//useRoute拿到的是当前的路由对象，可以拿到当前的路由信息比如url的路径
const route = useRoute()
//拿到store的实例
const store = useStore()
const selectMenu = computed(() => store.state.menu.selectMenu)

const userInfo = JSON.parse(localStorage.getItem('pz_userInfo'))

const closeTab = (item,index) => {
  store.commit('closeMenu',item)
  //如果删除的是非当前页tag不做任何操作
  if(route.path !== item.path){
    return 
  }
  //如果删除的是当前页tag
  const selectMenuData = selectMenu.value
  //如果删除的是最后一项
  if(index === selectMenuData.length){
    //如果只有一个tag
    if(!selectMenuData.length){
      router.push('/')
    }else{    //否则往前面进一位
      router.push({
        path:selectMenuData[index-1].path
      })
    }
  }else{//如果tag在中间
    router.push({
      path:selectMenuData[index].path
    })
  }
}
const handleClick = (command) => {
  if(command === 'cancel'){
    localStorage.removeItem('pz_token')
    localStorage.removeItem('pz_userInfo')
    localStorage.removeItem('pz_v3pz')
    window.location.href = window.location.origin
  }
}
</script>

<template>
  <div class="header-container flex-box">
    <div class="header-left flex-box">
        <el-icon class="icon" size="20" @click="store.commit('collapseMenu')"><Fold></Fold></el-icon>
        <ul class="flex-box">
          <li v-for="(item,index) in selectMenu" 
            :key="item.path"
            :class="{selected: route.path === item.path}"
            class="tab flex-box"
            >
            <el-icon  size="12"><component :is="item.icon"></component></el-icon>
            <router-link class="text flex-box" :to="{path: item.path}">{{ item.name }}</router-link>
            <el-icon class="close" size="12"
            @click="closeTab(item,index)"
            >
              <Close></Close>
            </el-icon>
          </li>
        </ul>
    </div>
    <div class="header-right flex-box">
        <el-dropdown @command="handleClick">
            <span class="el-dropdown-link flex-box">
                <el-avatar
                  :src="userInfo.avatar"
                />
                <p class="user-name">{{userInfo.name}}</p>
            </span>
            <template #dropdown>
                <el-dropdown-item command="cancel">退出</el-dropdown-item>
            </template>
        </el-dropdown>
    </div>
  </div>
</template>

<style lang="less" scoped>
    .flex-box{
        display: flex;
        align-items: center;
        height: 100%;
    }
  .header-container{
    justify-content: space-between;
    height: 100%;
    background-color: #fff;
    padding-right: 25px;
    .header-left{
        .icon{
            width: 45px;
            height: 100%;
        }
        .icon:hover{
            background-color: #f5f5f5;
            cursor:pointer;
        }
        .tab{
          padding: 0 10px;
          height: 100%;
          .text{
            margin: 0 5px;
          }
          .close{
            visibility: hidden;
          }
          //与tab同级用&
          &.selected{
            a{
              color: #409eff;
            }
            i{
              color: #409eff;
            }
            background-color: #f5f5f5;
          }
        }
        .tab:hover{
          background-color: #f5f5f5;
          .close{
            visibility: inherit;
            cursor:pointer;
            color: #000;
          }
        }
    }
    .header-right{
        .user-name{
            margin-left: 10px;
        }
    }
    a{
      height: 100%;
      color: #333;
      font-size: 15px;
    }
  }
</style>